<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <!-- <a-col :span="8">
            <a-form-model-item label="筛选时间">
              <j-date v-model="queryParam.timeBegin" style="width: 130px" />
              -
              <j-date v-model="queryParam.timeEnd" style="width: 130px" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="付款时间">
              <a-date-picker
                :default-value="getTime(queryParam.timeBegin)"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                placeholder="开始时间"
                @change="(value, dateString) => onChange(value, dateString, 'timeBegin')"
              />
              <!-- @change="(value, dateString) => onChange(value, dateString, 'timeBegin')" -->
              -
              <a-date-picker
                :default-value="getTime(queryParam.timeEnd)"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                placeholder="结束时间"
                @change="(value, dateString) => onChange(value, dateString, 'timeEnd')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="商户">
              <j-dict-select-tag
                v-model="queryParam.merchantId"
                dict-code="HC_MERCHANT,STORE_NAME,ID"
                placeholder="请选择商户"
                @change=""
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="站点">
              <j-dict-select-tag
                v-model="queryParam.siteId"
                dict-code="HC_SITE,NAME,ID"
                placeholder="请选择站点"
                @change=""
              />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="5">
            <a-form-model-item label="订单状态">
              <a-select v-model="queryParam.state" :allowClear="true" @change="getStatisticsList">
                <a-select-option value="pay">已付款</a-select-option>
                <a-select-option value="completed">已完成</a-select-option>
                <a-select-option value="canceled">已取消</a-select-option>
                <a-select-option value="refunding">退款中</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="6">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="getStatisticsList" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-spin :spinning="loading">
      <a-card title="当日浏览量" style="margin-bottom: 30px">
        <span style="font-size: 50px; font-weight: bold">{{ this.getDayViews }}</span>
      </a-card>
    </a-spin>

    <a-spin :spinning="loading">
      <a-card
        :title="
          item.type == 'allOrder'
            ? '全部订单概况'
            : item.type == 'site'
            ? item.name + '站点订单概况'
            : item.type == 'merchant'
            ? '全部商户概况'
            : item.type == 'merchantOrder'
            ? '商户订单状态'
            : ''
        "
        :hoverable="true"
        v-for="(item, index) in dataSourse"
        :key="index"
        style="margin-bottom: 30px"
      >
        <a-row :gutter="80">
          <a-col :span="8">
            <a-card
              :title="
                item.type == 'allOrder'
                  ? '订单销量'
                  : item.type == 'site'
                  ? item.name + '站点销量'
                  : item.type == 'merchant'
                  ? '全部商户'
                  : item.type == 'merchantOrder'
                  ? '未接单'
                  : ''
              "
              :hoverable="true"
              style="background-color: #fafafa"
              :head-style="{ textAlign: 'center' }"
              :body-style="{ textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }"
            >
              <span>{{ item.total1 }}</span>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              :title="
                item.type == 'allOrder'
                  ? '营业总额'
                  : item.type == 'site'
                  ? item.name + '站点营业总额'
                  : item.type == 'merchant'
                  ? '营业中'
                  : item.type == 'merchantOrder'
                  ? '出餐中'
                  : ''
              "
              :hoverable="true"
              style="background-color: #fafafa"
              :head-style="{ textAlign: 'center' }"
              :body-style="{ textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }"
            >
              <span>{{ item.total2 }} {{ item.type == 'allOrder' || item.type == 'site' ? '¥' : '' }}</span>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              :title="
                item.type == 'allOrder'
                  ? '营业利润'
                  : item.type == 'site'
                  ? item.name + '站点营业利润'
                  : item.type == 'merchant'
                  ? '打烊中'
                  : item.type == 'merchantOrder'
                  ? '已出餐'
                  : ''
              "
              :hoverable="true"
              style="background-color: #fafafa"
              :head-style="{ textAlign: 'center' }"
              :body-style="{ textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }"
            >
              <span>{{ item.total3 }} {{ item.type == 'allOrder' || item.type == 'site' ? '¥' : '' }}</span>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
    <!--    <a-card title="全部商户概况" :hoverable="true" style="margin-top: 30px;">-->
    <!--      <a-row :gutter="80">-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="全部商户" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="营业中" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="打烊中" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--      </a-row>-->
    <!--    </a-card>-->

    <!--    <a-card title="商户订单状态" :hoverable="true" style="margin-top: 30px;">-->
    <!--      <a-row :gutter="80">-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="未接单" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="出餐中" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--        <a-col :span="8">-->
    <!--          <a-card title="已出餐" :hoverable="true" style="background-color: #fafafa;" :head-style="{textAlign: 'center'}" :body-style="{textAlign: 'center', fontWeight: 'bold', fontSize: '50px', padding: '10px' }">-->
    <!--            <span>0</span>-->
    <!--          </a-card>-->
    <!--        </a-col>-->
    <!--      </a-row>-->
    <!--    </a-card>-->
  </a-card>
</template>

<script>
import moment from 'moment'
import { postAction, getAction } from '@api/manage'

function getDate(time) {
  let year = time.getFullYear()
  let month = time.getMonth() + 1
  let day = time.getDate()
  return { year, month, day }
}

let LastDate = new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24)
let lastTime = getDate(LastDate)
let newDate = new Date()
let nowTime = getDate(newDate)
let timeBegin = `${lastTime.year}-${lastTime.month > 9 ? lastTime.month : '0' + lastTime.month}-${
  lastTime.day > 9 ? lastTime.day : '0' + lastTime.day
} 19:00`
let timeEnd = `${nowTime.year}-${nowTime.month > 9 ? nowTime.month : '0' + nowTime.month}-${
  nowTime.day > 9 ? nowTime.day : '0' + nowTime.day
} 12:00`

export default {
  name: 'Analysis',
  components: {},
  data() {
    return {
      queryParam: {
        timeBegin,
        timeEnd,
      },
      dataSourse: [],
      getDayViews: 0,
      loading: false,
    }
  },
  created() {
    this.getStatisticsList()
  },
  methods: {
    moment,
    getTime(time) {
      return time ? this.moment(time, 'YYYY-MM-DD HH:mm') : null
    },
    onChange(value, dateString, field) {
      this.$set(this.queryParam, field, dateString)
    },
    searchReset() {
      this.queryParam = {}
      this.getStatisticsList()
    },
    getStatisticsList() {
      let that = this
      this.loading = true;

      console.log('this.queryParam',this.queryParam)

      postAction('/hc/hcOrderMerchant/getStatisticsList', this.queryParam)
        .then((res) => {
          if (res.success) {
            let tempArr = []
            res.result.forEach((item) => {
              if (item.type != 'merchant' && item.type != 'merchantOrder') {
                tempArr.push(item)
              }
            })
            that.dataSourse = tempArr
            console.log('this.dataSource', this.dataSourse)
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.loading = false
        })

      getAction('/hc/hcUser/getDayViews').then((res) => {
        if (res.success) {
          that.getDayViews = res.result
        } else {
          that.$message.warning(res.message)
        }
      })
    },
  },
}
</script>